<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
		<style type="text/css">
			/* fade */
			.fade-enter-active, .fade-leave-active {
			  transition: opacity .5s
			}
			.fade-leave-to, .fade-enter{
			  opacity: 0
			}
			
			/* translate */
			.translate-enter-active {
			  transition: all .3s ease;
			}
			.translate-leave-active {
			  transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
			}
			.translate-leave-to, .translate-enter {
			  transform: translateX(20px);
			  opacity: 0;
			}
			
			/* bounce */
			.bounce-enter-active {
			  animation: bounce .5s;
			}
			.bounce-leave-active {
			  animation: bounce .5s reverse;
			}
			@keyframes bounce {
			  0% {
			    transform: translateX(0);
			  }
			  50% {
			    transform: translateX(30px);
			  }
			  100% {
			    transform: translateX(0);
			  }
			}
		</style>
		<title></title>
	</head>
	<body class="container-fluid" style="padding-left: 50px"><br>
		
		<div id="app">
			<button v-on:click="flag = !flag">{{val}}</button><br><br>
			
			<!--Vue 提供了 transition 的封装组件-->
			<!--v- 是这些类名的前缀。使用 <transition name="fade"> 可以重置前缀，比如 v-enter 替换为 fade-enter-->
			
			<!--1-->
			<transition name="fade">
				<p v-show="flag">hello</p>
			</transition>
			
			<!--2-->
			<transition name="translate">
				<p v-show="flag">hello</p>
			</transition>
			
			<!--3-->
			<transition name="bounce">
			    <p v-if="flag">Look at me!</p>
			</transition>
			
			<!--4  使用了animate.css插件-->
		    <transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
		    	<p v-if="flag">hook</p>
		    </transition>
						
		</div>

		
		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag: true
				},
				computed: {
					val: function(){
						return this.flag ? '隐藏' : '显示'
					}
				}
			});
						
		</script>
	</body>
</html>
